<script setup>
import topNav from "../../components/topNav.vue";
import { onMounted, reactive, ref, getCurrentInstance, computed } from "vue";
import { onLoad, onReachBottom, onShow } from "@dcloudio/uni-app";
import { useCodeStore } from "@/stores/code.js";
import picView from "../../components/pic/index.vue";
import { operation } from "@/utils/num.js";
import { UnpackCreate } from "@/services/unpacking.js";

// @param op { string } 运算类型，有加减乘除（add / subtract / multiply / divide）

import { useGoodStore } from "@/stores/goods.js";

const goods = useGoodStore();
import {
  appCategory,
  supplierSelector,
  productCreate,
  appProductDetail,
  appProductDisable,
  appProductEnable,
  productUpdate,
  appProductCode,
  appUnit,
} from "@/services/goods";

import { base_URL } from "@/utils/http";
const num = ref(0);
const selectGoods = ref({});
const number = ref(1);
const sourceProductStockNum = ref(10);
const sourceNum = ref(1);
const targetNum = ref(1);
const isUp = ref(false);
onLoad(() => {
  goods.setGood({});
});
onShow(() => {
  isUp.value = false;
  console.log(goods.goods);
  if (goods.goods) {
    selectGoods.value = goods.goods;
    number.value = goods.goods.number;
    targetNum.value = goods.goods.number;
  }
  console.log(number.value);
});
const toSelect = () => {
  uni.navigateTo({
    url: "/pages/unpacking/goods_p/index",
  });
};

const onInput = (e) => {
  console.log(e, number.value);
  targetNum.value = operation(Number(e), Number(number.value), 5, "multiply");
};

const isCB = ref(false);

const goadd = async () => {
  if (isCB.value) {
    return;
  }
  isCB.value = true;
  try {
    const res = await UnpackCreate({
      sourceProductId: selectGoods.value.sourceProductId,
      sourceNum: sourceNum.value,
      targetNum: targetNum.value,
      targetProductId: selectGoods.value.id,
    });

    if (res.code == 200) {
      uni.showToast({
        title: "拆包成功",
        icon: "success",
      });
      setTimeout(() => {
        uni.navigateBack();
        isCB.value = false;
      }, 1000);
    } else {
      isCB.value = false;
    }
  } catch (e) {
    uni.showToast({
      title: e.msg,
      icon: "none",
    });
    isCB.value = false;
  }
};
</script>

<template>
  <topNav
    :title="type == 'add' ? '零售商品拆包' : '零售商品拆包'"
    @save="saveFun"
    rType="save"
  ></topNav>

  <view class="content">
    <view class="content-shop" @click="toSelect">
      <view class="content-shop-title"
        ><view>零售商品<text>*</text></view>
      </view>
      <view class="content-select" v-if="!selectGoods.id">
        <text>请选择零售商品</text>
        <up-icon name="arrow-right" color="#86909c" size="35rpx"></up-icon>
      </view>

      <view class="content-select" v-if="selectGoods.id">
        <view class="info">
          <view class="info-left">
            <image :src="selectGoods.image" mode="scaleToFill" />
          </view>
          <view class="info-right">
            <view class="info-right-title"
              ><text>{{ selectGoods.name }}</text>
            </view>
            <view class="info-right-code">{{
              selectGoods.barCode || "--"
            }}</view>
            <!-- <view class="info-right-title">{{ selectGoods.barCode }}</view> -->
          </view>
        </view>
        <up-icon name="arrow-right" color="#86909c" size="35rpx"></up-icon>
      </view>

      <!-- <view class="content-select" v-if="selectGoods.id">
        <text>请选择零售商品11</text>
        <up-icon name="arrow-right" color="#86909c" size="35rpx"></up-icon>
      </view> -->
    </view>

    <view class="content-shop" v-if="selectGoods.id">
      <view class="content-shop-title"
        ><view>关联主商品<text>*</text></view>
      </view>
      <view class="content-select" v-if="!selectGoods.id">
        <text>请选择关联主商品</text>
        <!-- <up-icon name="arrow-right" color="#86909c" size="35rpx"></up-icon> -->
      </view>
      <view class="content-select" v-if="selectGoods.id">
        <view class="info">
          <view class="info-left">
            <image :src="selectGoods.sourceProductImage" mode="scaleToFill" />
          </view>
          <view class="info-right">
            <view class="info-right-title"
              ><text>{{ selectGoods.sourceProductName }}</text>
            </view>
            <view class="info-right-code">{{
              selectGoods.sourceProductBarCode || "--"
            }}</view>
            <view class="info-right-stock">
              <text class="stock"
                >库存{{ selectGoods.sourceProductStockNum }}</text
              ></view
            >
          </view>
        </view>
        <!-- <up-icon name="arrow-right" color="#86909c" size="35rpx"></up-icon> -->
      </view>
    </view>

    <view class="content-shop">
      <view class="content-shop-title">
        <view class="left">关联主商品<text>*</text></view>
        <view class="right">
          <up-input
            class="input"
            v-model="sourceNum"
            @change="onInput"
            border="none"
            placeholder="数量"
            inputAlign="right"
          ></up-input>

          <text>= {{ targetNum || 10 }} {{ selectGoods.unit || "件" }}</text>
        </view>
      </view>
    </view>
  </view>
  <!-- v-permission="['shop:plan:create', 'manager:plan:create']" -->
  <view class="goods_bt">
    <!-- icon="plus"
  color="#1679FB" -->
    <view class="goods_bt_to"
      ><up-button
        @click="goadd"
        :color="selectGoods.id && targetNum > 0 ? '#1679FB' : '#c9cdd4'"
        type="primary"
        text="确认拆包"
      ></up-button>
    </view>
  </view>
</template>

<style lang="scss" scoped>
@import "./index.scss";
</style>
